<template>
  <div class="addForm">
    <!-- 常规表单部分 -->
    <el-form ref="form" :model="formData" :rules="rules" label-width="150px" @submit.native.prevent>
      <el-form-item label="任务名称" prop="taskName">
        <el-input v-model="formData.taskName" placeholder="请输入任务名称" maxlength="200" />
      </el-form-item>
      <el-form-item label="任务描述" prop="taskDesc">
        <el-input v-model="formData.taskDesc" placeholder="" maxlength="255" />
      </el-form-item>
      <el-form-item label="接入数据源类型" prop="origin">
        <el-select v-model="formData.origin" filterable placeholder="请选择" style="width: 100%" @change="selectType">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="接入数据源" prop="datasource">
        <el-button icon="el-icon-thumb" @click="handleSelectData">请选择</el-button>
        <HkTable v-if="formData.datasource" :table-data="checkData" :table-columns="qualtableLabel" :operate="true" :show-pag="false">
          <!--    接入产品    -->
          <template #companyInfos="scope">
            <el-tag
              v-for="(item, index) in scope.row.jsonObject.companyInfos"
              :key="index"
              style="margin-right: 10px"
            >{{ item }}</el-tag>
          </template>
          <template #operate="scope">
            <el-button type="text" @click="handleDelete(scope)">删除</el-button>
          </template>
        </HkTable>
      </el-form-item>
      <!-- 当数据是数据库时 -->
      <div v-if="formData.type == 'JDBC'">
        <el-divider />
        <el-form-item label="接入方式" prop="jdbcInfo.inputType">
          <el-radio-group v-model="formData.jdbcInfo.inputType">
            <el-radio-button :label="0">全量</el-radio-button>
            <el-radio-button :label="1">增量</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <div v-if="formData.jdbcInfo.inputType == 1">
          <el-form-item label="增量字段" prop="jdbcInfo.incFieldName">
            <el-input v-model="formData.jdbcInfo.incFieldName" placeholder="" />
          </el-form-item>
          <el-form-item label="增量字段值" prop="jdbcInfo.incFieldValue">
            <el-input v-model="formData.jdbcInfo.incFieldValue" placeholder="" />
          </el-form-item>
        </div>
        <el-divider />
        <el-form-item label="查询方式" prop="jdbcInfo.queryType">
          <el-radio-group v-model="formData.jdbcInfo.queryType">
            <el-radio-button :label="0">单表查询</el-radio-button>
            <el-radio-button :label="1">sql查询</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <div v-if="formData.jdbcInfo.queryType == 0">
          <el-form-item label="表名" prop="jdbcInfo.tableName">
            <el-input v-model="formData.jdbcInfo.tableName" style="width: 60%" placeholder="请输入表名" />
            <el-button style="margin-left: 10px" @click="jdbcTest">表名校验</el-button>
          </el-form-item>
          <el-form-item v-if="showField" label="查询字段" prop="searchField">
            <el-select
              v-model="formData.searchField"
              filterable
              multiple
              placeholder="请选择"
              style="width: 100%"
              @change="changeSearchField"
            >
              <el-option v-for="item in fieldOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </div>
        <div v-else>
          <el-form-item label="SQL语句" prop="jdbcInfo.sql">
            <el-input v-model="formData.jdbcInfo.sql" type="textarea" :rows="4" />
          </el-form-item>
        </div>
        <el-form-item label="数据样例" prop="jdbcInfo.dataSample">
          <el-button type="text" @click="jdbcSample">获取数据样例</el-button>
          <el-input v-model="formData.jdbcInfo.dataSample" type="textarea" :rows="4" />
        </el-form-item>
      </div>
      <!-- 数据源类型是http -->
      <div v-if="formData.type == 'HTTP'">
        <el-form-item label="认证方式" prop="httpInfo.authType">
          <el-select v-model="formData.httpInfo.authType" filterable placeholder="请选择" style="width: 100%">
            <el-option value="无"> 无 </el-option>
            <el-option value="Basic认证"> Basic认证 </el-option>
            <el-option value="Token认证"> Token认证 </el-option>
          </el-select>
        </el-form-item>
        <!-- 是token验证 -->
        <div v-if="formData.httpInfo.authType == 'Token认证'">
          <div class="typeTitle">Token请求配置</div>
          <el-form-item label="协议类型" prop="httpInfo.tokenRequest.tokenProtocolType">
            <el-select
              v-model="formData.httpInfo.tokenRequest.tokenProtocolType"
              filterable
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option value="HTTP"> HTTP </el-option>
              <el-option value="HTTPS"> HTTPS </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="请求方法" prop="httpInfo.tokenRequest.tokenRequestType">
            <el-select
              v-model="formData.httpInfo.tokenRequest.tokenRequestType"
              filterable
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option value="GET"> GET </el-option>
              <el-option value="POST"> POST </el-option>
              <el-option value="PUT"> PUT </el-option>
              <el-option value="PATCH"> PATCH </el-option>
              <el-option value="HEAD"> HEAD </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="请求URL" prop="httpInfo.tokenRequest.tokenRequestUrl">
            <el-input v-model="formData.httpInfo.tokenRequest.tokenRequestUrl" placeholder="请输入请求URL" />
          </el-form-item>

          <!-- json框部分 -->
          <el-form-item prop="httpInfo.tokenRequest">
            <JsonInput
              ref="token_input"
              :body="formData.httpInfo.tokenRequest.tokenRequestBody"
              :header="formData.httpInfo.tokenRequest.tokenHeadersList"
              @changeValue="changeTokenValue"
            />
          </el-form-item>

          <el-form-item label="Token获取" prop="httpInfo.tokenRequest.tokenValue">
            <el-input
              v-model="formData.httpInfo.tokenRequest.tokenValue"
              type="textarea"
              :rows="4"
              style="width: 80%; margin-right: 10px"
            />
            <el-button @click="getToken"> 获取</el-button>
          </el-form-item>
          <el-form-item label="Token解析类型" prop="httpInfo.tokenRequest.tokenAnalysisType">
            <el-radio-group v-model="formData.httpInfo.tokenRequest.tokenAnalysisType">
              <el-radio-button :label="0">JSON</el-radio-button>
              <el-radio-button :label="1">GROK</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            v-if="formData.httpInfo.tokenRequest.tokenAnalysisType == 0"
            label="JSON表达式"
            prop="httpInfo.tokenRequest.jsonExpression"
          >
            <el-input v-model="formData.httpInfo.tokenRequest.jsonExpression" placeholder="请输入JSON表达式" />
          </el-form-item>
          <el-form-item v-else label="GROK表达式" prop="httpInfo.tokenRequest.grokExpression">
            <el-input
              v-model="formData.httpInfo.tokenRequest.grokExpression"
              type="textarea"
              :rows="4"
              placeholder="请输入GROK表达式"
            />
          </el-form-item>
          <el-form-item label="Token解析" prop="httpInfo.tokenRequest.analysisToken">
            <el-input
              v-model="formData.httpInfo.tokenRequest.analysisToken"
              type="textarea"
              :rows="4"
              style="width: 80%; margin-right: 10px"
            />
            <el-button> 解析</el-button>
          </el-form-item>
          <div class="typeTitle">数据接口配置</div>
        </div>

        <el-form-item label="是否分页" prop="httpInfo.dataRequest.isPage">
          <el-radio-group v-model="formData.httpInfo.dataRequest.isPage">
            <el-radio-button :label="0">普通查询</el-radio-button>
            <el-radio-button :label="1">分页查询</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <div v-if="formData.httpInfo.dataRequest.isPage == 1">
          <el-form-item label="分页大小字段名称" prop="httpInfo.dataRequest.pageSizeFieldName">
            <el-input v-model="formData.httpInfo.dataRequest.pageSizeFieldName" placeholder="请输入分页大小字段名称" />
          </el-form-item>
          <el-form-item label="当前页字段名称" prop="httpInfo.dataRequest.pageNumFieldName">
            <el-input v-model="formData.httpInfo.dataRequest.pageNumFieldName" placeholder="请输入当前页字段名称" />
          </el-form-item>
          <el-form-item label="数据表达式" prop="httpInfo.dataRequest.pageExpression">
            <el-input v-model="formData.httpInfo.dataRequest.pageExpression" placeholder="请输入数据表达式" />
          </el-form-item>
        </div>
        <el-form-item label="协议类型" prop="httpInfo.dataRequest.protocolType">
          <el-select
            v-model="formData.httpInfo.dataRequest.protocolType"
            filterable
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option value="HTTP"> HTTP </el-option>
            <el-option value="HTTPS"> HTTPS </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请求方法" prop="httpInfo.dataRequest.requestType">
          <el-select
            v-model="formData.httpInfo.dataRequest.requestType"
            filterable
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option value="GET"> GET </el-option>
            <el-option value="POST"> POST </el-option>
            <el-option value="PUT"> PUT </el-option>
            <el-option value="PATCH"> PATCH </el-option>
            <el-option value="HEAD"> HEAD </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请求URL" prop="httpInfo.dataRequest.requestUrl">
          <el-input v-model="formData.httpInfo.dataRequest.requestUrl" placeholder="请输入请求URL" />
        </el-form-item>
        <!-- json框部分 -->
        <el-form-item prop="httpInfo.dataRequest">
          <JsonInput
            ref="json_input"
            :header="formData.httpInfo.dataRequest.headersList"
            :body="formData.httpInfo.dataRequest.requestBody"
            @changeValue="changeValue"
          />
        </el-form-item>
        <!-- 响应数据 -->
        <el-form-item label="响应数据" prop="httpInfo.responseBody">
          <el-input
            v-model="formData.httpInfo.responseBody"
            type="textarea"
            :rows="4"
            style="width: 80%; margin-right: 10px"
          />
          <el-button @click="getHttpSample"> 获取</el-button>
        </el-form-item>
      </div>
      <!-- 数据源类型是ES -->
      <div v-if="formData.type == 'ES'">
        <el-form-item label="每次查询数量" prop="esInfo.queryTimes">
          <el-input-number v-model="formData.esInfo.queryTimes" controls-position="right" />
        </el-form-item>
        <el-form-item label="查询事件间隔" prop="esInfo.intervalTime">
          <el-input-number v-model="formData.esInfo.intervalTime" controls-position="right" />
        </el-form-item>
        <el-form-item label="接入方式" prop="esInfo.inputType">
          <el-radio-group v-model="formData.esInfo.inputType">
            <el-radio-button :label="0">全量</el-radio-button>
            <el-radio-button :label="1">增量</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <div v-if="formData.esInfo.inputType == 1">
          <el-form-item label="增量字段" prop="esInfo.incFieldName">
            <el-input v-model="formData.esInfo.incFieldName" placeholder="" />
          </el-form-item>
          <el-form-item label="增量字段值" prop="esInfo.incFieldValue">
            <el-input v-model="formData.esInfo.incFieldValue" placeholder="" />
          </el-form-item>
        </div>
        <el-divider />
        <el-form-item label="查询方式" prop="esInfo.queryType">
          <el-radio-group v-model="formData.esInfo.queryType">
            <el-radio-button :label="0">条件查询</el-radio-button>
            <el-radio-button :label="1">DSL查询</el-radio-button>
            <el-radio-button :label="2">SQL查询</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="formData.esInfo.queryType == 0" label="条件查询" prop="esInfo.conQueryJson">
          <el-button v-if="!isShow" type="text" icon="el-icon-circle-plus-outline" @click="showCon">
            添加条件组</el-button>

          <div v-if="isShow">
            <logical-judgment
              ref="logicalJudgRef"
              :relation-data="formData.esInfo.relationData"
              :field-obj="searchFormObj"
              @addConditions="addConditions"
              @addGroup="addGroup"
              @handleChange="handleChange"
            />
          </div>
        </el-form-item>
        <el-form-item v-if="formData.esInfo.queryType == 1" label="DSL" prop="esInfo.dslQueryExp">
          <el-input v-model="formData.esInfo.dslQueryExp" type="textarea" :rows="4" />
        </el-form-item>
        <el-form-item v-if="formData.esInfo.queryType == 2" label="DSL" prop="esInfo.sqlQueryExp">
          <el-input v-model="formData.esInfo.sqlQueryExp" type="textarea" :rows="4" />
        </el-form-item>
        <el-form-item label="样例获取" prop="esInfo.dataSample">
          <el-input
            v-model="formData.esInfo.dataSample"
            type="textarea"
            :rows="4"
            style="width: 80%; margin-right: 10px"
          />
          <el-button @click="getSample"> 获取</el-button>
        </el-form-item>
      </div>
    </el-form>
    <SelectPro
      ref="selectRef"
      title="选择接入数据"
      :check-data="checkData"
      :qualtable-label="qualtableLabel"
      :active="0"
      :source-type="type"
      @handleSubmit="handleSubmit"
    />
  </div>
</template>

<script>
import { queryClassifyData } from '@/api/milkyway/dictManager'
import { getSourceList } from '@/api/milkyway/repositorypage'
import SelectPro from '@/components/Common/selectPro.vue'
import HkTable from '@/components/Hk-Table/index.vue'
import JsonInput from '@/components/Common/jsonInput.vue'
import LogicalJudgment from '@/components/Common/LogicalJudgment.vue'
import {
  getFirestDetails,
  getSample,
  getQueryKeyList,
  jdbcTest,
  jdbcSample,
  httpSample,
  getToken
} from '@/api/milkyway/taskList'
export default {
  name: 'Step1',
  components: { SelectPro, HkTable, JsonInput, LogicalJudgment },

  props: {
    // 收到的表单数据
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 字段列表的值
      searchField: undefined,
      // 是否展示字段列表
      showField: false,
      // 查询字段的列表
      fieldOptions: [],
      // 第一步的id
      fid: this.id,
      // 表单
      formData: {
        searchField: undefined,
        esInfo: {
          queryTimes: undefined,
          intervalTime: undefined,
          dataSample: undefined,
          inputType: undefined,
          incFieldName: undefined,
          incFieldValue: undefined,
          queryType: undefined,
          dslQueryExp: undefined,
          sqlQueryExp: undefined,
          conQueryJson: undefined,
          relationData: {
            flag: '',
            subSyntaxExpressnList: [
              {
                expressionVoList: [
                  {
                    contextValue: '',
                    operators: '',
                    matchValue: ''
                  }
                ],
                flag: 'or'
              }
            ]
          }
        },
        jdbcInfo: {
          inputType: undefined,
          queryType: undefined,
          tableName: undefined,
          searchField: undefined,
          sql: undefined,
          dataSample: undefined,
          incFieldName: undefined,
          incFieldValue: undefined
        },
        httpInfo: {
          authType: undefined,
          responseBody: undefined,
          tokenRequest: {
            tokenProtocolType: undefined,
            tokenRequestBody: {
              mode: 0,
              kvList: []
            },
            tokenHeadersList: undefined,
            queryTimes: undefined
          },

          dataRequest: {
            headersList: undefined,
            requestBody: {
              mode: 0
            },
            protocolTyp: undefined,
            requestType: undefined,
            requestUrl: undefined,
            isPage: undefined,
            pageSizeFieldName: undefined,
            pageNumFieldName: undefined,
            pageExpression: undefined
          },
          basicRequest: {
            userName: undefined,
            password: undefined
          }
        },
        taskSaveParamsSourceRule: {}
      },
      //  逻辑判断
      searchFormObj: {
        fieldList: [
          // 第一个下拉框
          {
            type: 'select',
            field: 'contextValue',
            list: 'contextList'
          },
          // 第二个下拉框
          {
            type: 'select',
            field: 'operators',
            list: 'operatorsList'
          },
          // 第三个下拉框
          {
            type: 'input',
            field: 'matchValue',
            hidden: false
          }
        ],
        searchData: {},
        listTypeInfo: {
          contextList: [],
          operatorsList: []
        }
      },

      // 表单参数
      rules: {
        taskName: [{ required: true, message: '任务名称不能为空', trigger: 'blur' }],
        origin: [{ required: true, message: '请选择数据源类型', trigger: 'change' }],
        datasource: [{ required: true, message: '请选择接入数据源', trigger: 'change' }],

        // JDBC部分
        'jdbcInfo.inputType': [{ required: true, message: '请选择接入方式', trigger: 'change' }],
        'jdbcInfo.incFieldName': [{ required: true, message: '请输入增量字段', trigger: 'blur' }],
        'jdbcInfo.queryType': [{ required: true, message: '请选择查询方式', trigger: 'change' }],
        'jdbcInfo.tableName': [{ required: true, message: '请输入表名', trigger: 'blur' }],
        searchField: [{ required: true, message: '请选择', trigger: 'change' }],
        'jdbcInfo.dataSample': [{ required: true, message: '不能为空', trigger: 'blur' }],
        'jdbcInfo.sql': [{ required: true, message: '不能为空', trigger: 'blur' }],
        // http部分
        'httpInfo.authType': [{ required: true, message: '请选择', trigger: 'change' }],
        'httpInfo.tokenRequest.tokenProtocolType': [{ required: true, message: '请选择', trigger: 'change' }],
        'httpInfo.tokenRequest.tokenRequestType': [{ required: true, message: '请选择', trigger: 'change' }],
        'httpInfo.tokenRequest.tokenRequestUrl': [{ required: true, message: '请输入Url', trigger: 'blur' }],
        'httpInfo.tokenRequest.tokenValue': [{ required: true, message: '不能为空', trigger: 'blur' }],
        'httpInfo.tokenRequest.jsonExpression': [{ required: true, message: '不能为空', trigger: 'blur' }],
        'httpInfo.tokenRequest.grokExpression': [{ required: true, message: '不能为空', trigger: 'blur' }],
        'httpInfo.tokenRequest.analysisToken': [{ required: true, message: '不能为空', trigger: 'blur' }],

        'httpInfo.dataRequest.isPage': [{ required: true, message: '请选择', trigger: 'change' }],
        'httpInfo.dataRequest.pageSizeFieldName': [{ required: true, message: '不能为空', trigger: 'blur' }],
        'httpInfo.dataRequest.pageNumFieldName': [{ required: true, message: '不能为空', trigger: 'blur' }],
        'httpInfo.dataRequest.protocolType': [{ required: true, message: '请选择', trigger: 'change' }],
        'httpInfo.dataRequest.requestType': [{ required: true, message: '请选择', trigger: 'change' }],
        'httpInfo.dataRequest.requestUrl': [{ required: true, message: '请输入Url', trigger: 'blur' }],
        'httpInfo.requestBody': [{ required: true, message: '不能为空', trigger: 'blur' }],
        // ES部分
        'esInfo.queryTimes': [{ required: true, message: '不能为空', trigger: 'blur' }],
        'esInfo.intervalTime': [{ required: true, message: '不能为空', trigger: 'blur' }],
        'esInfo.inputType': [{ required: true, message: '请选择', trigger: 'change' }],
        'esInfo.incFieldName': [{ required: true, message: '请输入', trigger: 'blur' }],
        'esInfo.incFieldValue': [{ required: true, message: '请输入', trigger: 'blur' }],
        'esInfo.queryType': [{ required: true, message: '请选择', trigger: 'change' }],
        'esInfo.dataSample': [{ required: true, message: '不能为空', trigger: 'blur' }]
      },
      // 选中的数据
      type: '',
      tableList: [],
      options: [],
      // 接入数据源所有数据
      checkData: [],
      qualtableLabel: [
        { label: '数据源名称', param: 'name' },
        { label: '接入产品', param: 'companyInfos', type: 'slot' },
        { label: 'IP', param: 'ip' },
        { label: '端口', param: 'port' }
      ],
      isShow: false
    }
  },
  watch: {
    'formData.origin'(newValue, oldValue) {
      // this.checkData = [];
    },
    id: {
      handler() {
        // this.getFirestDetail();
      },
      immediate: true
    }
  },
  mounted() {
    this.getProuductType()
    this.getFirestDetail()
  },
  methods: {
    // 字段值名
    changeSearchField(val) {
      this.formData.jdbcInfo.searchField = val.join(',')
    },
    // 获取组件数据
    changeValue(header, body) {
      if (this.formData.httpInfo) {
        this.formData.httpInfo.dataRequest.requestBody = body
        this.formData.httpInfo.dataRequest.headersList = header
      }
    },
    // token组件返回值
    changeTokenValue(header, body) {
      if (this.formData.httpInfo) {
        this.formData.httpInfo.tokenRequest.tokenRequestBody = body
        this.formData.httpInfo.tokenRequest.tokenHeadersList = header
      }
    },
    // 获取ES样例
    getSample() {
      getSample({
        datasource: this.formData.datasource,
        esInfo: this.formData.esInfo
      }).then((res) => {
        this.formData.esInfo.dataSample = JSON.stringify(res)
      })
    },
    // 获取token
    getToken() {
      getToken(this.formData).then((res) => {
        this.formData.httpInfo.tokenRequest.tokenValue = res
      })
    },
    // 获取JDBC样例
    jdbcSample() {
      jdbcSample(this.formData).then((res) => {
        this.formData.jdbcInfo.dataSample = res
      })
    },
    // 获取http响应数据
    getHttpSample() {
      httpSample(this.formData).then((res) => {
        this.formData.httpInfo.responseBody = JSON.stringify(res)
      })
    },
    // jdbc表名校验
    jdbcTest() {
      const tableName = this.formData.jdbcInfo.tableName
      const datasourceId = this.formData.datasource
      if (!datasourceId) {
        this.$message.warning('数据源未选择')
      } else if (!tableName) {
        this.$message.warning('请输入表名')
      } else {
        jdbcTest({ tableName, datasourceId }).then((res) => {
          const _res = JSON.parse(res)

          if (_res.length > 0) {
            this.fieldOptions = _res.map((item) => {
              return {
                value: item.columname,
                label: item.columname
              }
            })
            this.$message.success('表名校验成功')
            this.showField = true
          } else {
            this.$message.warning('表名校验失败')
          }
        })
      }
    },

    // 添加条件组
    showCon() {
      if (!this.formData.datasource) {
        this.$message.warning('数据源未选择')
        return
      } else {
        this.isShow = true
        // 获取第一个栏位
        queryClassifyData('taskExpression').then((res) => {
          this.searchFormObj.listTypeInfo.operatorsList = res.map((item) => {
            return {
              label: item.itemLabel,
              value: item.itemVale
            }
          })
        })
        // 获取第二个栏位
        getQueryKeyList(this.formData.datasource).then((res) => {
          this.searchFormObj.listTypeInfo.contextList = res.map((item) => {
            return {
              label: item,
              value: item
            }
          })
        })
      }
    },

    // 选择器选中后类型
    selectType(val) {
      this.$forceUpdate()
      this.type = val
      this.$set(this.formData, 'type', val)

      this.checkData = []
    },
    /** 获取产品类型 */
    getProuductType() {
      getSourceList({ type: 0 }).then((res) => {
        res.forEach((item) => {
          this.options.push({
            label: item.keyValue,
            value: item.keyValue
          })
        })
      })
    },
    /** 表单触发的事件 */
    handleChange(data) {
      // console.log("返回的值为===============", data);
      this.formData.esInfo.conQueryJson = JSON.stringify(data)
    },
    // 增加组
    addGroup() {
      this.formData.esInfo.relationData.subSyntaxExpressnList.push({
        expressionVoList: [
          {
            contextValue: '',
            matchValue: '',
            operators: ''
          }
        ],
        flag: ' or '
      })
    },
    addConditions(data) {
      this.formData.esInfo.relationData.subSyntaxExpressnList[data].expressionVoList.push({
        contextValue: '',
        matchValue: '',
        operators: ''
      })
    },
    handleSubmit(val) {
      this.checkData = val
      this.formData.datasource = val[0].id
    },

    // 取消按钮
    cancel() {
      this.isOpen = false
    },
    /** 删除按钮操作 */
    handleDelete(data) {
      this.checkData.splice(data.$index, 1)
      this.formData.datasource = ''
      // this.$refs.selectRef.$refs.table.templateSelection = ''
    },
    handleAddProduct() {
      this.$refs.addRef.isOpen = true
    },
    /**  点击 ‘请选择’ **/
    handleSelectData(val) {
      this.$refs.selectRef.show(this.checkData)
    },
    /** 提交按钮 */
    submitForm() {
      if (this.$refs.json_input) {
        this.$refs.json_input.changeValue()
      }
      if (this.$refs.token_input) {
        this.$refs.token_input.changeValue()
      }
      return new Promise((resolve, reject) => {
        this.$refs.form.validate((valid) => {
          if (valid) {
            resolve(this.formData)
          } else {
            reject('error submit!!')
            return false
          }
        })
      })
    },
    // 第一步更新任务
    updateFirstSteps() {
      getFirestDetails(this.fid).then((res) => {
        this.$nextTick(() => {
          this.checkData = []
          console.log('shuzhi', res)
          this.formData = res.taskInfo

          this.checkData.push(res.dataSource)
        })
      })
    },
    // 第一步获取任务
    getFirestDetail() {
      if (this.fid) {
        getFirestDetails(this.fid).then((res) => {
          this.checkData = []
          const newObj = { }
          for (const key in res.taskInfo) {
            if (res.taskInfo[key]) {
              newObj[key] = res.taskInfo[key]
            }
          }
          this.formData = Object.assign({}, this.formData, newObj)

          // 显示字段列表
          this.showField = true
          this.isShow = true
          // this.formData.jdbcInfo.inputType=res.
          // 给组件传的type
          this.type = res.taskInfo.origin
          this.formData.type = res.taskInfo.origin
          // this.formData.rulePolicyId = res.companyInfos[0].id
          this.checkData.push(res.dataSource)
          this.checkData[0].jsonObject = {}
          this.checkData[0].jsonObject.companyInfos = []
          if (res.companyInfos[0]) {
            this.checkData[0].jsonObject.companyInfos.push(res.companyInfos[0].productName)
          }
          // jdbc的查询字段部分
          if (res.taskInfo.datasourceInfo && JSON.parse(res.taskInfo.datasourceInfo).searchField) {
            this.formData.searchField = JSON.parse(res.taskInfo.datasourceInfo).searchField.split(',')
          }
          if (res.taskInfo.esInfo) {
            this.formData.esInfo.relationData = JSON.parse(res.taskInfo.esInfo.conQueryJson)
          }
        })
      }
    }
  }
}
</script>

<style scoped>
.demo-ruleForm {
  width: 90%;
  margin-top: 30px;
}
.addForm {
  margin-top: 20px;
  padding: 0 20px;
  height: calc(100% - 90px);
  /* overflow: scroll; */
}
.typeTitle {
  margin: 20px 0;
  font-size: 18px;
  font-weight: 600;
}
</style>
